<template>
  <div class="fileBox">
    <el-row v-if="annexList.length > 0">
      <el-col :span="24">
        <div class="title">PDF文件查看</div>
        <div>
          <el-tag
            v-for="item in annexList"
            :key="index"
            type="success"
            @click="viewAnnex(item)"
            style="margin-left: 10px"
            >点击查看</el-tag
          >
        </div>
      </el-col>
    </el-row>
    <el-row v-if="imgshoWList.length > 0">
      <el-col :span="24">
        <div class="title">图片文件查看</div>
        <el-carousel
          indicator-position="outside"
          trigger="click"
          height="500px"
          :autoplay="false"
        >
          <el-carousel-item v-for="(item, index) in imgshoWList" :key="index">
            <template>
              <el-image
                style="height: 100%; width: 100%"
                trigger="click"
                :src="item.url"
                fit="fill"
                :preview-src-list="[item.url]"
              >
                <div slot="placeholder" class="image-slot">
                  加载中<span class="dot">...</span>
                </div>
              </el-image>
            </template>
          </el-carousel-item>
        </el-carousel>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getSuffix } from "@/utils/index.js";
export default {
  name: "FilePreview",
  props: {
    fileList: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      annexList: [],
      sourceUrl: "",
      imgshoWList: [],
    };
  },
  watch: {
    fileList(val) {
      this.imgshoWList = this.value;
      this.showAnnex(val);
    },
  },
  computed: {
    imageUrl() {
      return this.value;
    },
  },
  mounted() {
    this.showAnnex(this.fileList);
  },
  methods: {
    showAnnex(row) {
      this.centerAnnex = [];
      this.annexObj = {};
      let imgshoWList = [];
      let annexList = [];
      var _this = this;
      row.file_pdf.forEach(function (value) {
        //参数1：value---正在遍历的元素
        switch (value.typeStr) {
          case "pdf":
          case "xlsx":
          case "xls":
          case "docx":
          case "doc":
            annexList.push(value);
            break;
          default:
            imgshoWList.push(value);
            break;
        }
      });
      this.imgshoWList = imgshoWList;
      this.annexList = annexList;
      this.drawerAnnex = true;
    },
    getiFremUrl(file, i) {
      this.currentIndex = i;
      const url = this.fileUrl + file;
      this.sourceUrl = url;
    },
    viewAnnex(item) {
      console.log(item.url);
      window.open(item.url, "_blank");
    },
  },
};
</script>

<style lang="scss" scoped>
.fileBox {
  padding: 20px;
  .title {
    font-weight: 600;
    margin: 20px 0;
  }
}

::v-deep.el-image__inner,
.el-image__placeholder[data-v-1c1b3b50],
.el-image__error[data-v-1c1b3b50] {
  height: 200px !important;
  width: auto !important;
}
</style>
